<template>
  	<div class="complete">
  		<x-header style="background: #e78a3d;" :left-options="{showBack: false}" :right-options="{showMore: false}" @on-click-more="showMenus = true">付款完成</x-header>
  		<div class="complete-wapper" ref="completeWrapper">
  			<div class="amount_img">
  				<img src="../../common/assets/05check_ok.png" />
  			</div>
	  		<div class="amount">
	  			<p class="title">付款完成</p>
	  			<p class="price"><span class="smallrmb">￥</span>{{this.order.consumeAmt}}</p>
	  			<p class="pay_time">付款时间    2017.10.01</p>
	  		</div>
	  		
	  		<div class="comp-box">
	  			<div class="comp-title">账单明细</div>
	  			<ul class="compList">
	  				<li class="clearfix" v-for="item in selectFoods" v-show="item.count>0">
	  					<div class="foods-title">
	  						<p class="foodname">{{item.productName}}</p>
	  						<p class="ingredientbox">{{item.specNameList}}</p>
	  					</div>
	  					<div class="compdesc">
	  						<span class="goodsnum">x{{item.count}}</span>
	  						<span class="price"><span class="smallrmb">￥</span>{{item.productPrice}}</span>
	  					</div>
	  				</li>
	  			</ul>
	  			<div class="comp-No">账单号<span>{{this.order.orderNo}}</span></div>
	  			<div class="comp-No">订单备注：<span>{{this.order.remark}}</span></div>
	  		</div>
	  		<div class="complete_pay" @click.stop.prevent="complete_pay">
	  			确认并返回首页
	  		</div>
  		</div>
  	</div>
</template>

<script type="text/ecmascript-6">
	import BScroll from 'better-scroll';
	import { XHeader } from 'vux';
	import {showOrderDesc} from 'src/methods/request.js';
	  export default {
	    props: {
	    },
	    data() {
	      return {
	        orderNo:"",
	        selectFoods:[],
	        totalPrice:"",
	        order:[]
	      };
	    },
	    created() {
	    	this.orderNo = JSON.parse(sessionStorage.getItem("orderNo"));
			//订单详情
			showOrderDesc({orderNo:this.orderNo}).then(
				response => {
					if(response.rspCode == "0000"){
						this.order = response.data;
						this.$nextTick(() => {
					        this._initScroll();
					    });
					}else{
						alert("查询订单详情失败！");
					}
				}
			).catch(
				error => console.log(error)
			);
	   },
	    mounted(){
	    	this.$nextTick(_ => {
				this.selectFoods = JSON.parse(sessionStorage.getItem("selectFoods"));
				this.totalPrice = JSON.parse(sessionStorage.getItem("totalPrice"));
	    	})
	    },
	    methods: {
	    	complete_pay() {
	    		sessionStorage.removeItem("selectFoods");
		        sessionStorage.removeItem("totalPrice");
		        sessionStorage.removeItem("orderNo");
		        this.$router.push('/home');
      		},
      		_initScroll() {
		      	this.completeWrapper = new BScroll(this.$refs.completeWrapper, {
		         	click: true
		        });
		     },
	    },
	    beforeRouteLeave(to, from, next) {
		// 设置下一个路由的 meta
			to.meta.keepAlive = false; // 让 A 不缓存，即刷新
			next();
		},
	    components: {
			XHeader
	    }
	  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixin";
    .complete{
    	display: flex;
    	flex-direction: column;
    }
    .complete-wapper{
    	flex: 1;
    	position: absolute;
    	top: 43px;
	    bottom: 48px;
	    width: 100%;
	    overflow: hidden;
    }
    .amount_img{
    	width: 100%;
    	height: 60px;
    	padding-top: 8px;
    }
    .amount_img img{
    	height: 60px;
    	display: block;
    	margin: 0 auto;
    }
    
      .clearfix::after {
            content: ".";
            clear: both;
            display: block;
            overflow: hidden;
            font-size: 0;
            height: 0;
        }

        .clearfix {
            zoom: 1;
        }
	.complete_pay{
		position: fixed;
		width: 94%;
		height: 40px;
		text-align: center;
		background: #e78a3d;
		line-height: 40px;
		font-size: 16px;
		color: #fff;
		left: 3%;
		bottom: 15px;
		border-radius: 50px;
	}
	.amount{
		width: 94.5%;
		padding: 20px 0 14px;
		margin: 3% 0 0 2.55%;
		background: #f2f2f2;
		border-radius: 6px;
	}
	.amount .title{
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #333333;
	}
	.amount .price{
		width: 100%;
		text-align: center;
		color: #e78a3d;
		font-weight: 600;
		font-size: 34px;
		padding: 12px 0;
		text-indent: -8px;
	}
	.amount .smallrmb{
		font-size: 18px;
	}
	.pay_time{
		font-size: 12px;
		color: #a6a6a6;
		text-align: center;
	}
	.comp-box{
		width: 94.5%;
		margin: 3% 0 0 2.55%;
		border-radius: 6px;
		padding:0 10px 10px;
		box-sizing: border-box;
		background: #f2f2f2;
	}
	.comp-box .title{
		font-size: 12px;
		color: #a7a7a7;
		padding-bottom: 10px;
		text-indent: 14px;
	}
	.comp-title{
		width: 100%;
		background: #f2f2f2;
		color: #bbbbbb;
		font-size: 14px;
		border-bottom: 1px solid #D9D9D9;
		line-height: 36px;
	}
	.compList li{
		border-bottom: 1px solid #D9D9D9;
		width: 100%;
		padding: 8px 0;
		
	}
	.foods-title{
		float: left;
	}
	.foodname{
		font-size: 14px;
		color: #170909;
		line-height: 20px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		width: 120px;
	}
	.ingredientbox{
		font-size: 12px;
		color: #a6a6a6;
	}
	.compdesc{
		float: right;
		line-height: 30px;
	}
	.compdesc .goodsnum{
		font-size: 14px;
	}
	.compdesc .price{
		font-size: 16px;
		padding-left: 50px;
	}
	.foods-notdoub .foodname{
		line-height: 30px;
	}
	.comp-No{
		width: 100%;
		font-size: 12px;
		text-align: center;
		padding: 10px 0 0 0;
		color: #a6a6a6;
	}
</style>